<template>
    <div>
        <div v-if="tasks && tasks.length > 0">
        <div v-for="(item, index) in tasks" :key="index">
            <div class="item">
                <div class="item-input">
                    <input
                        type="checkbox"
                        v-model="item.isComplete"
                        @change="updateStatus(index, item.isComplete)"
                    />
                </div>
                <div class="item-title">{{ item.name }}</div>
                <div class="item-del">
                    <button @click="delTask(index)">删除</button>
                </div>
            </div>
        </div>
    </div>
    <div v-else>暂无任务</div>
    </div>
    
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    name: 'navMain',
    props: {
        tasks: {
            type: Array,
            required: true
        }
    },
    emit: ['delTask', 'updateTask'],
    setup(props, ctx) {


        let delTask = (index) => {
            ctx.emit('delTask', index);
        };

        let updateStatus = (index, status) => {
            ctx.emit('updateTask', {
                index: index,
                status: status
            });
        }

        return {
            delTask,
            updateStatus,
        }

    }
})
</script>

<style scoped lang="scss">
.item {
    width: 200px;
    margin: 0px;
    height: 35px;
    line-height: 35px;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    z-index: 99;
    &:hover {
        background-color: gray;
    }
}

.item-title {
    flex: 1;
    white-space: nowrap;
}

.item-del {
    margin-right: 0px;
}
</style>